<template>
  <div class="photoinfo-container">
    <h3 class="subtitle">图片标题</h3>
    <p class="subitem">
      <span>发表时间：{{ message.datetime | dateFormat }}</span>
      <span>点击：0 次</span>
    </p>
    <hr />
    <p class="content">美图秀秀</p>

    <!-- 图片的缩略图 -->
    <div class="thumbs">
      <vue-preview
        :slides="slide1"
        @close="handleClose"
        tag="div"
      ></vue-preview>
    </div>

    <commentBox></commentBox>
  </div>
</template>

<script>
import comment from "../subcomment/Comment.vue";
export default {
  data() {
    return {
      message: {
        datetime: new Date(),
      },
      slide1: [
        {
          src:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg",
          msrc:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg",
          alt: "picture1",
          title: "Image Caption 1",
          w: 600,
          h: 400,
        },
        {
          src:
            "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg",
          msrc:
            "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg",
          alt: "picture2",
          title: "Image Caption 2",
          w: 600,
          h: 400,
        },
      ],
    };
  },
  methods: {
    handleClose() {
      console.log("close event");
    },
  },
  components: {
    commentBox: comment,
  },
};
</script>

<style lang="scss" scopedSlots>
.thumbs {
    margin: 0;
  img {
    margin: 10px 22px;
    width: 120px;
    height: 100px;
    box-shadow: 2px 2px 3px #ccc;
    float: left;
    figure{
        margin: 0 20px;
        a {
            margin: 0;
        }
    }
    
  }
}
.pswp__img{
        margin: 0!important;
    }
.thumbs:after {
  content: ".";
  display: block;
  clear: both;
  overflow: hidden;
  height: 0;
}
</style>